<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <title>CRUD</title>
</head>
<body onload="init()">
    <div class="container">
        <table class="table" id="table">
            <!-- <caption> 关于表格存储内容的描述或总结。 -->
                <caption>
                    <h2>习题</h2>
                </caption>
                <caption>
                    <button class="btn btn-info" id="add" data-toggle="modal" data-target="#myModal">新增</button>
                    <button class="btn btn-info" id="delete" >删除</button>
                    <button class="btn btn-info" id="edit" data-toggle="modal" data-target="#myModal">编辑</button>
                    <button class="btn btn-info" id="query">查询</button>
                    <input type="text" id="idquery" placeholder="按工号查询" style="widows: 130px;">
                    <input type="text" id="namequery" placeholder="按姓名查询" style="widows: 130px;">
                </caption>
                <thead>
                        <tr>
                            <th>序号</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>密码</th>
                            <th>年龄</th>
                            <th>出生日期</th>
                        </tr>
                    </thead>
                    <tbody class="tbody" id="tbody">
                    </tbody>
        </table>

        <!-- 模态框 -->
        <!-- 声明定义模态框组件 -->
        <div class="modal" id="myModal" role="dialog">
            <!-- 窗口声明 -->
            <div class="modal-dialog">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 1.框的标题 -->  
                     <!-- data-dismiss="modal" 取消的属性 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" aria-hidden="true">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">新增用户</h4>
                    </div>
                    <!-- 2.框内信息 -->
                    <div class="modal-body">
                        <label for="id">工号:</label>
                        <input type="text" class="form-control" id="m_code" placeholder="请输入工号">
                        <label for="name">姓名:</label>
                        <input type="text" class="form-control" id="m_userName" placeholder="请输入姓名">
                        <label for="sex">性别:</label>
                        <input type="text" class="form-control" id="m_sex" placeholder="请输入性别">
                        <label for="passWord">密码:</label>
                        <input type="text" class="form-control" id="m_passWord" placeholder="请输入密码">
                        <label for="age">年龄:</label>
                        <input type="text" class="form-control" id="m_age" placeholder="请输入年龄">
                        <label for="birthday">出生日期:</label>
                        <input type="text" class="form-control" id="m_birthday" placeholder="请输入出生日期">
                    </div>
                    <!-- 3.框的按钮 -->
                    <div class="modal-footer">
                        <button class="btn btn-info" id="save">保存</button>
                        <button class="btn btn-default" id="cancer" data-dismiss="modal">取消</button>
                        <button class="btn btn-default" id="submit" data-dismiss="modal">提交</button>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/operation.js"></script>
</body>
</html>